<template>
  <div>
    <h1>Button 按钮</h1>
    <p>基础组件，触发业务逻辑时使用。</p>
    <h2>标准按钮</h2>
    <br>
    <Button>默认按钮</Button>
    <Button type="primary">标准按钮</Button>
    <Button type="success">成功按钮</Button>
    <Button type="info">信息按钮</Button>
    <Button type="warning">警告按钮</Button>
    <Button type="error">危险按钮</Button>
    <Button type="text">文字按钮</Button>
    <p>按钮类型有：默认按钮、标准按钮、成功按钮、信息按钮、警告按钮、危险按钮、文字按钮以及对应的六种颜色按钮。</p>
    <p>通过设置 <code>type</code> 为 <code>primary</code> 、<code>success</code> 、<code>info</code> 、<code>warning</code> 、<code>error</code> 、 <code>text</code> 创建不同样式的按钮，不设置为默认样式。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Button&gt;默认按钮&lt;/Button&gt;
        &lt;Button type=&quot;primary&quot;&gt;标准按钮&lt;/Button&gt;
        &lt;Button type=&quot;success&quot;&gt;成功按钮&lt;/Button&gt;
        &lt;Button type=&quot;info&quot;&gt;信息按钮&lt;/Button&gt;
        &lt;Button type=&quot;warning&quot;&gt;警告按钮&lt;/Button&gt;
        &lt;Button type=&quot;error&quot;&gt;危险按钮&lt;/Button&gt;
        &lt;Button type=&quot;text&quot;&gt;文字按钮&lt;/Button&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data {
          return {

          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>圆角按钮</h2>
    <br>
    <Button shape="circle">圆形按钮</Button>
    <Button shape="circle" type="primary">主要按钮</Button>
    <Button shape="circle" type="success">成功按钮</Button>
    <Button shape="circle" type="info">信息按钮</Button>
    <Button shape="circle" type="warning">危险按钮</Button>
    <Button shape="circle" type="error">错误按钮</Button>
    <p>按钮类型有：圆角按钮的类型与标准按钮一致。</p>
    <p>通过设置 <code>shape</code> 为 <code>circle</code> 把标准按钮的样式修改为圆角按钮。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Button shape=&quot;circle&quot;&gt;圆形按钮&lt;/Button&gt;
        &lt;Button shape=&quot;circle&quot; type=&quot;primary&quot;&gt;主要按钮&lt;/Button&gt;
        &lt;Button shape=&quot;circle&quot; type=&quot;success&quot;&gt;成功按钮&lt;/Button&gt;
        &lt;Button shape=&quot;circle&quot; type=&quot;info&quot;&gt;信息按钮&lt;/Button&gt;
        &lt;Button shape=&quot;circle&quot; type=&quot;warning&quot;&gt;危险按钮&lt;/Button&gt;
        &lt;Button shape=&quot;circle&quot; type=&quot;error&quot;&gt;错误按钮&lt;/Button&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>禁用状态</h2>
    <br>
    <Button shape="circle" disabled>圆形按钮</Button>
    <Button shape="circle" type="primary" disabled @click="hc()">主要按钮</Button>
    <Button shape="circle" type="success" disabled>成功按钮</Button>
    <Button shape="circle" type="info" disabled>信息按钮</Button>
    <Button shape="circle" type="warning" disabled>危险按钮</Button>
    <Button shape="circle" type="error" disabled>错误按钮</Button>
    <p>按钮类型有：禁用按钮的类型与标准按钮一致，禁用按钮是不可点击的。</p>
    <p>通过给按钮添加 <code>disabled</code> 属性，即可以把任何按钮设置为禁用状态。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Button shape=&quot;circle&quot; disabled&gt;圆形按钮&lt;/Button&gt;
        &lt;Button shape=&quot;circle&quot; type=&quot;primary&quot; disabled&gt;主要按钮&lt;/Button&gt;
        &lt;Button shape=&quot;circle&quot; type=&quot;success&quot; disabled&gt;成功按钮&lt;/Button&gt;
        &lt;Button shape=&quot;circle&quot; type=&quot;info&quot; disabled&gt;信息按钮&lt;/Button&gt;
        &lt;Button shape=&quot;circle&quot; type=&quot;warning&quot; disabled&gt;危险按钮&lt;/Button&gt;
        &lt;Button shape=&quot;circle&quot; type=&quot;error&quot; disabled&gt;错误按钮&lt;/Button&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>图标按钮</h2>
    <br>
    <Button type="primary" icon="icon-search">搜索按钮</Button>
    <Button type="primary" icon="icon-add">添加商品</Button>
    <Button type="primary" icon="icon-download">下载模板</Button>
    <Button type="primary" icon="icon-upload">上传模板</Button>
    <br><br>
    <Button type="primary" icon="icon-edit" shape="circle">修改订单</Button>
    <Button type="primary" icon="icon-add" shape="circle">添加商品</Button>
    <Button type="primary" icon="icon-download" shape="circle">下载模板</Button>
    <Button type="primary" icon="icon-upload" shape="circle">上传模板</Button>
    <p>通过设置 <code>icon</code> 属性在 <code>Button</code> 内嵌入一个 <code>Icon</code> ，或者直接在 <code>Button</code> 内使用 <code>Icon</code> 组件。</p>
    <p>使用 <code>Button</code> 的 <code>icon</code> 属性，图标位置将在最左边，如果需要自定义位置，需使用 <code>Icon</code> 组件。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Button type=&quot;primary&quot; icon=&quot;icon-search&quot;&gt;搜索按钮&lt;/Button&gt;
        &lt;Button type=&quot;primary&quot; icon=&quot;icon-add&quot;&gt;添加商品&lt;/Button&gt;
        &lt;Button type=&quot;primary&quot; icon=&quot;icon-download&quot;&gt;下载模板&lt;/Button&gt;
        &lt;Button type=&quot;primary&quot; icon=&quot;icon-upload&quot;&gt;上传模板&lt;/Button&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;Button type=&quot;primary&quot; icon=&quot;icon-edit&quot; shape=&quot;circle&quot;&gt;修改订单&lt;/Button&gt;
        &lt;Button type=&quot;primary&quot; icon=&quot;icon-add&quot; shape=&quot;circle&quot;&gt;添加商品&lt;/Button&gt;
        &lt;Button type=&quot;primary&quot; icon=&quot;icon-download&quot; shape=&quot;circle&quot;&gt;下载模板&lt;/Button&gt;
        &lt;Button type=&quot;primary&quot; icon=&quot;icon-upload&quot; shape=&quot;circle&quot;&gt;上传模板&lt;/Button&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>按钮组合</h2>
    <br>
    <ButtonGroup>
      <Button type="primary">左侧</Button>
      <Button type="primary">居中</Button>
      <Button type="primary">右侧</Button>
    </ButtonGroup>
    <p>将多个 <code>Button</code> 放入 <code>ButtonGroup</code> 内，可实现按钮组合的效果。</p>
    <p>通过设置 <code>ButtonGroup</code> 的属性 <code>size</code> 为 <code>small</code> 或 <code>mini</code> ，可更改按钮组尺寸。不设置size，则为标准尺寸。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;ButtonGroup&gt;
          &lt;Button type=&quot;primary&quot;&gt;左侧&lt;/Button&gt;
          &lt;Button type=&quot;primary&quot;&gt;居中&lt;/Button&gt;
          &lt;Button type=&quot;primary&quot;&gt;右侧&lt;/Button&gt;
        &lt;/ButtonGroup&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>加载按钮</h2>
    <br>
    <Button type="success" loading>加载中...</Button>
    <Button type="success" shape="circle" loading>加载中...</Button>
    <Button type="success" shape="circle" :loading="loading" @click="toLoading">
      <span v-if="!loading">请点击...</span>
      <span v-else>加载中...</span>
    </Button>
    <br><br>
    <p>通过添加 <code>loading</code> 属性可以让按钮处于加载中状态，最后一个按钮在点击时进入加载状态。</p>
    <br>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Button type=&quot;success&quot; loading&gt;加载中...&lt;/Button&gt;
        &lt;Button type=&quot;success&quot; shape=&quot;circle&quot; loading&gt;加载中...&lt;/Button&gt;
        &lt;Button type=&quot;success&quot; shape=&quot;circle&quot; :loading=&quot;loading&quot; @click=&quot;toLoading&quot;&gt;
          &lt;span v-if=&quot;!loading&quot;&gt;请点击！&lt;/span&gt;
          &lt;span v-else&gt;加载中...&lt;/span&gt;
        &lt;/Button&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data(){
          return {
            loading: false
          }
        },
        methods: {
          toLoading () {
            this.loading = true
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <br>
    <h2>不同尺寸</h2>
    <br>
    <Button type="primary" size="large">标准按钮</Button>
    <Button type="primary" size="middle">添加按钮</Button>
    <Button type="primary" size="small">信息按钮</Button>
    <br><br>
    <Button type="primary" shape="circle" size="large">标准按钮</Button>
    <Button type="primary" shape="circle" size="middle">添加按钮</Button>
    <Button type="primary" shape="circle" size="small">信息按钮</Button>
    <p>按钮有四种尺寸：默认、标准、添加、信息</p>
    <p>通过设置 <code>size</code> 为：<code>large</code> 、<code>middle</code> 、<code>small</code> 将按钮设置为标准按钮、添加按钮、信息按钮。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Button type=&quot;primary&quot; size=&quot;large&quot;&gt;标准按钮&lt;/Button&gt;
        &lt;Button type=&quot;primary&quot; size=&quot;middle&quot;&gt;添加按钮&lt;/Button&gt;
        &lt;Button type=&quot;primary&quot; size=&quot;small&quot;&gt;信息按钮&lt;/Button&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;Button type=&quot;primary&quot; shape=&quot;circle&quot; size=&quot;large&quot;&gt;标准按钮&lt;/Button&gt;
        &lt;Button type=&quot;primary&quot; shape=&quot;circle&quot; size=&quot;middle&quot;&gt;添加按钮&lt;/Button&gt;
        &lt;Button type=&quot;primary&quot; shape=&quot;circle&quot; size=&quot;small&quot;&gt;信息按钮&lt;/Button&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>API</h2>
    <p>Button props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <!-- <br>
    <Button icon="icon-search"></Button> -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          width: 500,
          key: 'explain',
          tooltip: true
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableData: [
        {
          attribute: 'type',
          explain: '按钮类型，可选值为primary、info、success、warning、error或者不设置',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'size',
          explain: '按钮大小，可选值为large、middle、small或者不设置',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'shape',
          explain: '按钮形状，可选值为circle或者不设置',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'htmlType',
          explain: '设置button原生的type，可选值为button、submit、reset',
          type: 'String',
          default: 'button'
        },
        {
          attribute: 'disabled',
          explain: '设置按钮为禁用状态',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'loading',
          explain: '设置按钮为加载中状态',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'icon',
          explain: '设置按钮的图标类型',
          type: 'String',
          default: '-'
        }
      ]
    }
  },
  methods: {
    hc () {
      alert('您单击了按钮！')
    },
    dbHc () {
      alert('您双击了按钮！')
    },
    toLoading () {
      this.loading = true
    }
  }
}
</script>

<style scoped lang="less">
h1{
  font-size: 20px;
  padding: 10px 0;
}
p{
  padding: 10px 0;
}
code{
  background-color: #aaaaaa;
}
pre{
  font-size: 14px;
}
</style>
